<template>
  <div class="bg-base">
    <div class="left"></div>
    <div class="right"></div>
    <div class="flex-center-center base">
      <div class="input-area bg">
        <div class="font30 mb20">
          {{isLogin?'登录':'注册'}}
        </div>
        <div class="bolder font20 mb-10 mt-10 gray">用户名</div>
        <el-input v-model="userName" placeholder="请输入用户名"></el-input>
        <div class="bolder font20 mb-10 mt-10 gray">密码</div>
        <el-input show-password v-model="password" @keydown.enter.native="certainBtnClick" placeholder="请输入密码"></el-input>
        <div v-if="!isLogin">
          <div class="bolder font20 mb-10 mt-10 gray">再次输入密码</div>
          <el-input show-password v-model="rePasword" placeholder="请再次输入密码"></el-input>
          <div class="bolder font20 mb-10 mt-10 gray">手机</div>
          <el-input show-password v-model="phone" placeholder="请输入手机号"></el-input>
        </div>
<!--        <div class="bolder font20 mb-10 mt-10 gray">-->
<!--          <span class="red-txt">*</span>-->
<!--          <span>内网服务器ip</span>-->
<!--        </div>-->
<!--        <el-input v-model="innetUrl" placeholder="请输入内网服务器ip"></el-input>-->
<!--        <div class="font13 gray mt-10">内网服务器ip，是您能访问内网点餐系统的重要网关地址，如果您不知道，请联系管理员获取</div>-->

        <div class="flex-center-end">
          <el-button type="text" @click="switchBtnClick">{{isLogin?'注册':'登录'}}</el-button>
        </div>
        <div class="flex-center-center">
          <el-button class="bot-btn" type="primary" round @click="certainBtnClick">{{isLogin?'登录':'注册'}}</el-button>
        </div>
      </div>
    </div>

  </div>
</template>

<script>
import {ORDERING_LOGIN, ORDERING_REGISTER} from "@/assets/const/api";
import {getStore, setStore} from "js-utils";
import {updateBaseURL} from "@/config/request";

export default {
    name: '',
    mixins: [],
    components: {},
    props: {},
    data () {
        return {
          isLogin:true,
          userName:'',
          password:'',
          rePasword:'',
          innetUrl:'',
          phone:''
        }
    },
    computed: {

    },
    watch: {},
    created() {
      this.innetUrl = getStore('guard-ip',1)||''
    },
    mounted () {},
    methods: {
      switchBtnClick(){
        this.isLogin = !this.isLogin
      },
      certainBtnClick(){
        if(this.userName.length === 0){
          this.$message.error('请输入用户名')
          return
        }
        if(this.password.length === 0){
          this.$message.error('请输入密码')
          return
        }
        // if (this.innetUrl.length === 0){
        //   this.$message.error('请输入内网服务器ip地址')
        //   return
        // }
        // setStore('guard-ip',this.innetUrl,1)
        // updateBaseURL()
        let url = ''
        let dic = {userName:this.userName,password:this.password}
        if(this.isLogin){
          url = ORDERING_LOGIN
        }else {
          url = ORDERING_REGISTER
          if(this.rePasword.length === 0){
            this.$message.error('请再次输入密码')
            return
          }
          if(this.rePasword !== this.password){
            this.$message.error('两次密码不一致')
            return;
          }
          if (this.phone.length === 0){
            this.$message.error('请输入手机号')
            return;
          }
          dic['phone'] = this.phone
        }
        this.$http.post(url,dic).then(res=>{
          if (res.code === 200) {
            if(!this.isLogin){
              this.isLogin = true
              this.$message.success('操作成功')
            }else{
              this.$store.commit('setUserInfo',res.data.user);
              setStore('token',res.data.token,true)
              // this.$emit('loginSucceed',res.data.token)
              // this.$router.push('/').catch(err => ({}))
              if (res.data.user.level === 4){
                this.routeTo('/mealManager',1)
              }else{
                this.routeTo('/',1)
              }

              setTimeout(()=>{
                this.$router.go(0)
              },300)
            }
          }
        })
      }
    }
}
</script>

<style scoped lang="scss">
.bg-base{
  position: relative;
  .left{
    position:absolute;
    left:0;
    top: 0;
    height: 100%;
    width: 50%;
    background-color: #7AB7B6;
  }
  .right{
    position:absolute;
    left:50%;
    top: 0;
    height: 100%;
    width: 50%;
    background-color: #E5CFAA;
  }
  .base{
    position: relative;
    height: 100vh;
    z-index: 10;
    .input-area{
      background-color: white;
      width:400px;
      padding: 20px;
      .bot-btn{
        width: 60%;
      }
    }
  }
}


</style>